<template>
  <div>
    <ul class="accordion">
      <li style="margin-left:20px"><span @click="getchildren" class="link"><i class="fa fa-chevron-down" v-bind:class='{openImg:rotateitem.open==true}'></i><slot name="test2"></slot></span>
          <ul>
              <li v-for="(item,index) in list4" :key="index" style="margin-left:20px" v-bind:class='{liselected:(index==choseitemindex && item.PATHID==pathid3)}' @click="selecte(index,item)"><span class="link">{{item.NAME}}</span></li>
          </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "treeRoot",
    props: {
        item1:{
            type: Object,
            default () {
                 return {}
             }
        },
        newchoseitemindexclear:{
          type: Number,
          default:0
      },
      pathid3:{
            type: String,
            default () {
                 return ""
             }
        }
    },
    data() {
      return {
        list4:[],
        choseitemindex:-1,
        pointInfo:[],
        rotateitem:{
          open:false,
        }
      }
    },
    methods: {
        selecte(index,item){
            this.pointInfo = [];
            this.choseitemindex = index;
            this.pointInfo.push(item.NAME);
            this.pointInfo.push(item.PATHID);
            this.$emit('selectvalue3', this.pointInfo);
        },
        getchildren(){   
            this.pointInfo = [];
            this.pointInfo.push(this.item1.NAME);
            this.pointInfo.push(this.item1.PATHID);
            this.$emit('selectvalue3', this.pointInfo);
           if(this.list4.length>0){
               this.list4 = [];
               this.rotateitem.open=false;
               return;
           }
           if(this.rotateitem.open){
              this.rotateitem.open=false;
           }else{
              this.rotateitem.open=true;
           }
           var params = '{"source":"","bizObj":"SZJC_PROJECTBASEINFO","service":"selectMoreHasAuth","parentField":"PARENTID","childField":"ID","showField":"NAME","appendFields":["GUID","ID","NAME","TYPE","PATHID","PARENTID","PARENTNAME","SORTID"],"filter":"1=1","orderList":[],"_param":{"refKey":""},"_method":"component.getTreeDataAsyn"}';  
           this.$ajax({
                    method: 'post',
                   // url: '/sxdtpm/servlet/Action.cmd',
                    url:this.COMMON_URL,
                    data: {
                      node:this.item1.ID,
                      FixJSON: params
                    }
                }).then((res) => {
                     console.log(res.data);
                     this.list4 = res.data.treedata;
                     console.log(res.data.treedata);
                     
                }).catch((err)=>{
                     console.log(err);
                });
       },
    },
    computed:{
      
    },
    watch: {
        newchoseitemindexclear:{
             handler(newVal) {
                   this.choseitemindex=this.newchoseitemindexclear;
             }
        }
    }
  }

</script>

<style scoped>
  .accordion {
    width: 100%;
    margin: 0 auto;
    background: #FFF;
  }

  .accordion .link {
    display: block;
    padding: 15px 15px 15px 42px;
    font-size: 14px;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .link:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .link:active {
    background-color: #ECECEC;
  }

  .accordion li i {
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -8px;
    font-size: 16px;
    color: #999999;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .accordion li i.fa-chevron-down {
    font-size: 16px;
  }

  .fa{
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
  } 

  .fa-chevron-down:before{
    content: " ";
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
    margin-top: 6px;
    margin-left: 5px;
    clear: both;
    float: right;
  }

  .openImg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /**
   * Submenu
   -----------------------------*/
  .submenu {
    overflow: hidden;
    padding: 0 10px;
    opacity: 0;
    max-height: 0px;
    font-size: 14px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .openChild {
    max-height: 10000vh;
    opacity: 1;
    display: block;
  }

  li {
    list-style-type: none;
  }
    .accordion .noline::before{
    border-top:0;
  }

  .liselected{
      color: red;
  }
</style>